<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>

<link rel="Stylesheet" type="text/css" href="/Mass_template/common/wColorPicker/src/wColorPicker.css" />
<script type="text/javascript" src="/Mass_template/common/wColorPicker/lib/rgbHex.min.js"></script>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		mySheet.SetConfig({ChildPage:5,DragMode:1});
		var headers = [
			{Text:"상태|삭제|구/동|우편번호|주소|트리\n레벨", Align:"Center"}
		];
		var cols = [
			{Type:"Status", Align:"Center"},
			{Type:"DelCheck", Align:"Center"},
			{Type:"Text", Width:350, TreeCol:1,LevelSaveName:"TREELEVEL"},
			{Type:"Text", Width:65, Align:"Center",Format:"PostNo"},
			{Type:"Text", Width:370, Align:"Left"},
			{Type:"Int", Width:40, Align:"Center"}
		];
		
		mySheet.InitHeaders(headers);
		mySheet.InitColumns(cols);
	
		mySheet.FitColWidth();	//컬럼의 너비 조정
		mySheet.SetExtendLastCol(1);
		
		doAction("search");
	});

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch (sAction) {
		case "search": //조회
			mySheet.DoSearch("../data/tree_data.xml");
			break;
		}
	}
	
	function doTest() {
		var inRow = mySheet.GetSelectRow();
		var inLvl = mySheet.GetRowLevel(inRow);
		
		console.log("select row : " + inRow + ", level : " + inLvl);
		
		// 같은 레벨을 추가하기 위해선 아래 부분에 추가된다.
		mySheet.DataInsert(inRow + 1, inLvl);
	}
	
	function doEvent() {
		var openlevel = parseInt(document.getElementById("levelCombo").value);
		var childopen = parseInt(document.getElementById("openCombo").value);
		mySheet.ShowTreeLevel(openlevel,childopen);
	}
	
</script>
<title>트리 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">트리 예제</div>
	<div id="desc">
		일반적인 트리 컬럼의 기본 기능을 확인한다.
	</div>
	<div id="functionArea">
		<div>ShowTreeLevel 메서드를 사용하여 데이터가 트리 형태일 때 트리 레벨을 설정한다.</div>
		<span>
			보여질레벨 :
			<select id="levelCombo">
				<option value="0">모두 접기</option>
				<option value="-1" selected="selected">모두 펼치기</option>
				<option value="1">1레벨까지</option>
				<option value="2">2레벨까지</option>
				<option value="3">3레벨까지</option>
			</select>
			&nbsp;&nbsp;
			자식레벨 :
			<select id="openCombo">
				<option value="0" selected="selected">이전상태유지</option>
				<option value="1">모두 접음</option>
				<option value="2">모두 펼침</option>
			</select>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" onclick="javascript:doEvent();" value="적용">
			<input type="button" onclick="javascript:doTest();" value="Test">
		</span>
	</div>
	<div id="viewArea">
	</div>
</div>
</body>
</html>